<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>药品管理 - 智能医疗系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container mt-4">
    <h2 class="mb-4">药品库存管理</h2>

    <!-- 新增药品表单 -->
    <div class="card mb-4">
        <div class="card-header">新增药品</div>
        <div class="card-body">
            <form @submit.prevent="addMedicine" class="row g-3">
                <div class="col-md-4">
                    <input v-model="newMedicine.name" type="text" class="form-control" placeholder="药品名称" required>
                </div>
                <div class="col-md-4">
                    <input v-model="newMedicine.description" type="text" class="form-control" placeholder="药品描述">
                </div>
                <div class="col-md-2">
                    <input v-model.number="newMedicine.stock" type="number" class="form-control" placeholder="初始库存" required>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-success w-100">添加</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 药品列表 -->
    <table class="table table-hover">
        <thead>
        <tr>
            <th>药品名称</th>
            <th>描述</th>
            <th>库存</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="med in medicines" :key="med.id">
            <td>{{ med.name }}</td>
            <td>{{ med.description }}</td>
            <td>
                <input v-model.number="med.stock" type="number" class="form-control" style="width: 100px;">
            </td>
            <td>
                <button @click="updateStock(med)" class="btn btn-sm btn-primary">更新库存</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.5/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            medicines: [],
            newMedicine: { name: '', description: '', stock: 1000 }
        },
        mounted() {
            axios.get('/api/medicines')
                .then(res => this.medicines = res.data);
        },
        methods: {
            addMedicine() {
                axios.post('/api/medicines', this.newMedicine)
                    .then(() => {
                        this.medicines.push({...this.newMedicine});
                        this.newMedicine = { name: '', description: '', stock: 1000 };
                    });
            },
            updateStock(medicine) {
                axios.put(`/api/medicines/${medicine.id}`, { stock: medicine.stock })
                    .catch(() => alert('库存更新失败'));
            }
        }
    });
</script>
</body>
</html>

message-center.html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>消息中心 - 智能医疗系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet>
    <style>
        .message-item {
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 10px;
            padding: 15px;
        }
        .unread { background-color: #f8f9fa; }
    </style>
</head>
<body>
<div id="app" class="container mt-4">
    <h2 class="mb-4">消息中心</h2>

    <!-- 发送新消息 -->
    <div class="card mb-4">
        <div class="card-body">
            <textarea v-model="newMessage" class="form-control mb-2" placeholder="输入留言内容"></textarea>
            <button @click="sendMessage" class="btn btn-primary">发送留言</button>
        </div>
    </div>

    <!-- 消息列表 -->
    <div v-for="msg in messages" :class="['message-item', { unread: !msg.isRead }]">
        <div class="d-flex justify-content-between">
            <small class="text-muted">{{ formatDate(msg.createdAt) }}</small>
            <span v-if="msg.sender" class="badge bg-info">来自：{{ msg.sender.username }}</span>
        </div>
        <p class="mt-2">{{ msg.content }}</p>
        <div v-if="msg.reply" class="alert alert-secondary mt-2">
            管理员回复：{{ msg.reply }}
        </div>

        <!-- 管理员回复框 -->
        <div v-if="isAdmin && !msg.reply" class="mt-2">
            <textarea v-model="msg.replyText" class="form-control" placeholder="输入回复内容"></textarea>
            <button @click="replyMessage(msg)" class="btn btn-sm btn-success mt-2">回复</button>
        </div>
    </div>


    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.5/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                messages: [],
                newMessage: '',
                isAdmin: false // 根据实际登录状态设置
            },
            mounted() {
                axios.get('/api/messages')
                    .then(res => this.messages = res.data);

                // 检查用户角色
                axios.get('/api/user/role')
                    .then(res => this.isAdmin = res.data.role === 'ADMIN');
            },
            methods: {
                sendMessage() {
                    axios.post('/api/messages', { content: this.newMessage })
                        .then(() => {
                            this.messages.unshift({
                                content: this.newMessage,
                                createdAt: new Date().toISOString(),
                                isRead: false
                            });
                            this.newMessage = '';
                        });
                },
                replyMessage(msg) {
                    axios.post(`/api/messages/${msg.id}/reply`, { reply: msg.replyText })
                        .then(() => msg.reply = msg.replyText);
                },
                formatDate(dateStr) {
                    return new Date(dateStr).toLocaleString();
                }
            }
        });
    </script>
    </head>>
</html>